<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { getUserInfo as fetchUserInfo } from '@/api/mock'
import { clearAuth } from '@/utils/auth'

const router = useRouter()
const userInfo = ref({
  id: 0,
  username: '',
  name: '',
  avatar: '',
  role: ''
})

// 编辑表单数据
const editForm = ref({
  username: '',
  name: '',
  avatar: ''
})

// 控制modal显示
const modalVisible = ref(false)

onMounted(async () => {
  try {
    const res = await fetchUserInfo()
    userInfo.value = res.data
  } catch (error) {
    message.error('获取用户信息失败')
  }
})

const handleEdit = () => {
  // 打开modal并初始化表单数据
  editForm.value = {
    username: userInfo.value.username,
    name: userInfo.value.name,
    avatar: userInfo.value.avatar
  }
  modalVisible.value = true
}

const handleCancel = () => {
  modalVisible.value = false
}

const handleSave = () => {
  // 这里应该有一个API调用来保存用户信息
  // 模拟保存成功
  userInfo.value = {
    ...userInfo.value,
    ...editForm.value
  }
  message.success('保存成功')
  modalVisible.value = false
  
  // 如果需要通知主应用用户信息已更新
  if (window.$wujie?.bus) {
    window.$wujie.bus.$emit('child-app:userUpdated', {
      userInfo: userInfo.value
    })
  }
}

const handleLogout = () => {
  clearAuth()
  message.success('已退出登录')
  router.push('/login')
}
</script>

<template>
  <div class="profile-container">
    <a-card>
      <template #title>
        <div class="profile-header">
          <a-avatar :size="64" :src="userInfo.avatar" />
          <h2>{{ userInfo.name }}</h2>
        </div>
      </template>

      <a-descriptions bordered>
        <a-descriptions-item label="用户名">
          {{ userInfo.username }}
        </a-descriptions-item>
        <a-descriptions-item label="角色">
          {{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}
        </a-descriptions-item>
        <a-descriptions-item label="ID">
          {{ userInfo.id }}
        </a-descriptions-item>
      </a-descriptions>

      <div class="action-buttons">
        <a-button type="primary" @click="handleEdit">编辑资料</a-button>
        <a-button danger @click="handleLogout">退出登录</a-button>
      </div>
    </a-card>
    
    <!-- 编辑资料的Modal -->
    <a-modal
      v-model:visible="modalVisible"
      title="编辑个人资料"
      @ok="handleSave"
      @cancel="handleCancel"
      :maskClosable="false"
    >
      <a-form :model="editForm" layout="vertical">
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="editForm.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="editForm.name" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="头像URL" name="avatar">
          <a-input v-model:value="editForm.avatar" placeholder="请输入头像URL" />
        </a-form-item>
        <a-form-item>
          <div class="avatar-preview">
            <p>头像预览：</p>
            <a-avatar :size="64" :src="editForm.avatar" />
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.profile-container {
  padding: 24px;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.action-buttons {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

.avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
</style>